import { array, fn, hash } from "@ember/helper";
import Form from "discourse/components/form";
import StyleguideExample from "discourse/plugins/styleguide/discourse/components/styleguide-example";

const Forms = <template>
  <h2>Controls</h2>
  <StyleguideExample @title="Input">
    <Form as |form|>
      <form.Field @title="Username" @name="username" as |field|>
        <field.Input placeholder="Username" />
      </form.Field>
      <form.Field @title="Age" @name="age" as |field|>
        <field.Input placeholder="Age" @type="number" @format="small" />
      </form.Field>
      <form.Field @title="Website" @name="website" as |field|>
        <field.Input @before="https://" @after=".com" @format="large" />
      </form.Field>
      <form.Field @title="After" @name="after" as |field|>
        <field.Input @after=".com" />
      </form.Field>
      <form.Field @title="Before" @name="before" as |field|>
        <field.Input @before="https://" />
      </form.Field>
      <form.Field
        @title="Secret"
        @name="secret"
        @description="An important password"
        as |field|
      >
        <field.Password />
      </form.Field>
    </Form>
  </StyleguideExample>

  <StyleguideExample @title="Question">
    <Form as |form|>
      <form.Field @title="Enabled" @name="enabled" as |field|>
        <field.Question />
      </form.Field>
    </Form>
  </StyleguideExample>

  <StyleguideExample @title="Toggle">
    <Form as |form|>
      <form.Field @title="Enabled" @name="enabled" as |field|>
        <field.Toggle />
      </form.Field>
    </Form>
  </StyleguideExample>

  <StyleguideExample @title="Composer">
    <Form as |form|>
      <form.Field @title="Query" @name="query" as |field|>
        <field.Composer />
      </form.Field>
    </Form>
  </StyleguideExample>

  <StyleguideExample @title="Code">
    <Form as |form|>
      <form.Field @title="Query" @name="query" as |field|>
        <field.Code />
      </form.Field>
    </Form>
  </StyleguideExample>

  <StyleguideExample @title="Textarea">
    <Form as |form|>
      <form.Field @title="Query" @name="query" as |field|>
        <field.Textarea />
      </form.Field>
    </Form>
  </StyleguideExample>

  <StyleguideExample @title="Select">
    <Form as |form|>
      <form.Field @title="Enabled" @name="enabled" as |field|>
        <field.Select as |select|>
          <select.Option @value="true">Yes</select.Option>
          <select.Option @value="false">No</select.Option>
        </field.Select>
      </form.Field>
    </Form>
  </StyleguideExample>

  <StyleguideExample @title="CheckboxGroup">
    <Form as |form|>
      <form.CheckboxGroup
        @title="I give explicit permission"
        as |checkboxGroup|
      >
        <checkboxGroup.Field
          @title="Use my email for any purpose."
          @name="contract"
          as |field|
        >
          <field.Checkbox>Including signing up for services I can't unsubscribe
            to.</field.Checkbox>
        </checkboxGroup.Field>
        <checkboxGroup.Field
          @title="Sign my soul away."
          @name="contract2"
          as |field|
        >
          <field.Checkbox>Will severly impact the afterlife experience.</field.Checkbox>
        </checkboxGroup.Field>
      </form.CheckboxGroup>
    </Form>
  </StyleguideExample>

  <StyleguideExample @title="Image">
    <Form as |form|>
      <form.Field @title="Image" @name="image" as |field|>
        <field.Image @type="avatar" />
      </form.Field>
    </Form>
  </StyleguideExample>

  <StyleguideExample @title="Icon">
    <Form as |form|>
      <form.Field @title="Icon" @name="icon" as |field|>
        <field.Icon />
      </form.Field>
    </Form>
  </StyleguideExample>

  <StyleguideExample @title="Menu">
    <Form as |form data|>
      <form.Field @title="Enabled" @name="enabled" as |field|>
        <field.Menu @selection={{data.enabled}} as |menu|>
          <menu.Item @value="true">Yes</menu.Item>
          <menu.Divider />
          <menu.Item @value="false">No</menu.Item>
        </field.Menu>
      </form.Field>
    </Form>
  </StyleguideExample>

  <StyleguideExample @title="RadioGroup">
    <Form as |form|>
      <form.Field @title="Enabled" @name="enabled" @format="full" as |field|>
        <field.RadioGroup as |radioGroup|>
          <radioGroup.Radio @value="true">Yes</radioGroup.Radio>
          <radioGroup.Radio @value="false" as |radio|>
            <radio.Title>No</radio.Title>
            <radio.Description>
              Choosing no, will make you inelligible for the contest.
            </radio.Description>
          </radioGroup.Radio>
        </field.RadioGroup>
      </form.Field>
    </Form>
  </StyleguideExample>

  <h2>Layout</h2>

  <StyleguideExample @title="Section">
    <Form as |form|>
      <form.Section @title="Section title">
        Content
      </form.Section>
    </Form>
  </StyleguideExample>

  <StyleguideExample @title="Alert">
    <Form as |form|>
      <form.Alert @icon="pencil">
        You can edit this form.
      </form.Alert>
    </Form>
  </StyleguideExample>

  <StyleguideExample @title="InputGroup">
    <Form as |form|>
      <form.InputGroup as |inputGroup|>
        <inputGroup.Field @title="Username" @name="username" as |field|>
          <field.Input />
        </inputGroup.Field>
        <inputGroup.Field @title="Email" @name="email" as |field|>
          <field.Input />
        </inputGroup.Field>
      </form.InputGroup>
    </Form>
  </StyleguideExample>

  <StyleguideExample @title="Collection">
    <Form
      @data={{hash foo=(array (hash bar=1 baz=2) (hash bar=3 baz=4))}}
      as |form|
    >
      <form.Button @action={{fn form.addItemToCollection "foo"}} @icon="plus" />

      <form.Collection @name="foo" as |collection index|>
        <form.Row as |row|>
          <row.Col @size={{6}}>
            <collection.Field @title="Bar" @name="bar" as |field|>
              <field.Input />
            </collection.Field>
          </row.Col>

          <row.Col @size={{4}}>
            <collection.Field @title="Baz" @name="baz" as |field|>
              <field.Input />
            </collection.Field>
          </row.Col>

          <row.Col @size={{2}}>
            <form.Button @action={{fn collection.remove index}} @icon="minus" />
          </row.Col>
        </form.Row>
      </form.Collection>

    </Form>
  </StyleguideExample>

  <StyleguideExample @title="Row/Col">
    <Form as |form|>
      <form.Row as |row|>
        <row.Col @size={{6}}>
          <form.Field
            @title="Username"
            @name="username"
            @validation="required"
            as |field|
          >
            <field.Input />
          </form.Field>
        </row.Col>
        <row.Col @size={{4}}>
          <form.Field @title="Email" @name="email" as |field|>
            <field.Input />
          </form.Field>
        </row.Col>
        <row.Col @size={{2}}>
          <form.Submit />
        </row.Col>
      </form.Row>
    </Form>
  </StyleguideExample>

  <StyleguideExample @title="Multiline">
    <Form as |form|>
      <form.Row as |row|>
        <row.Col @size={{6}}>
          <form.Field
            @title="Username"
            @name="username"
            @validation="required"
            as |field|
          >
            <field.Input />
          </form.Field>
        </row.Col>
        <row.Col @size={{6}}>
          <form.Field @title="Email" @name="email" as |field|>
            <field.Input />
          </form.Field>
        </row.Col>

        <row.Col @size={{12}}>
          <form.Field @title="Adress" @name="adress" as |field|>
            <field.Input />
          </form.Field>
        </row.Col>
      </form.Row>
    </Form>
  </StyleguideExample>

  <h2>Validation</h2>

  <StyleguideExample @title="Input">
    <Form @validateOn="change" as |form|>
      <form.Field
        @title="Username"
        @name="username"
        @validation="required"
        as |field|
      >
        <field.Input />
      </form.Field>
    </Form>
  </StyleguideExample>
</template>;

export default Forms;
